<template>
<!-- 
detail_text: "少量破洞可以接受。"
origin: "临沂"
price: 0
rec: 1
size: "不限"
title: "求购上好的木皮"
type: "杨木"
unit: "m³"
-->
    <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false"  label-position="left" v-loading="loading">
        <el-form-item label="标题" required prop="title">
            <el-input v-model="form.title" placeholder="需求标题" size="small" clearable class="input"></el-input>
        </el-form-item>
        <el-form-item label="种类">
            <el-input type="text" v-model="form.type" class="input"></el-input>
        </el-form-item>
         <el-form-item label="规格">
            <el-input type="text" v-model="form.size" class="input"></el-input>
        </el-form-item>
        <el-form-item label="原产地">
            <el-input type="text" v-model="form.origin" class="input"></el-input>
        </el-form-item>
        <el-form-item label="价格">
            <el-input type="text" v-model="form.price" class="input"></el-input>
        </el-form-item>
        <el-form-item label="推荐">
            <el-switch v-model="form.rec"></el-switch>
        </el-form-item>
        <el-form-item label="单位">
            <el-select v-model="form.unit" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="详情文字描述" required prop="detail_text">
            <el-input type="textarea" v-model="form.detail_text" class="input"></el-input>
        </el-form-item>
        
        
        <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button>清空</el-button>
        </el-form-item>
    </el-form>
    
   

</template>


<script>

//api
import { adminDemand } from "@/api/content.js"
import { mapMutations } from 'vuex'
export default {
    name: "DemandAdd",
    components: {

    },
    data(){
        return {
            options:[
                '块', '个', '方', '吨', '条', '捆', '斤', '公斤', '条', '米', '箱', '袋', '拖'
            ],
            form: {
                id: '',
                title: '',
                type: '',
                add_time: '',
                size: '',
                origin: '',
                price: '',
                rec: 0,
                update_time: '',
                detail_text: '',
                unit: '',
            },
            rules: {
                title: [
                    { required: true, message: '请输入需求标题', trigger: 'blur' },
                ],
                detail_text: [
                    { required: true, message: '请填写需求文字描述', trigger: 'blur' }
                ]
            },
            loading: false,
        }
    },
    mounted(){

    },
    methods: {
        ...mapMutations('ad', [
            'unshiftDemand'

        ]),
       
        async onSubmit(){
            console.log(this.form)
            if (this.form.title === "" || this.form.detail_text == ""){
                this.$message({
                    showClose: true,
                    type: "error",
                    message: "请将标题、内容填写完整",
                })
                return;
            }

            this.loading = true;
            let data = await adminDemand.add(this.form)

            this.loading = false;
            this.unshiftDemand(data.demand)
            this.$message({
                showClose: true,
                type: 'success',
                message: "添加成功"
            })
            this.form = {
                id: '',
                title: '',
                type: '',
                add_time: '',
                size: '',
                origin: '',
                price: '',
                rec: 0,
                update_time: '',
                detail_text: '',
                unit: '',
            };
        },
        handleUploadSuccess(response){
            this.form.image = response.url
        },
    }
    
}
</script>

<style lang="scss" scope>
.article-table-container {
    margin: 0 auto;
    width: 95%;
    display: flex;
    flex-direction: column;
    background-color: #fdfdfd;
}
.input {
    max-width: 60%;
}
</style>